<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        window.addEventListener("load", function(evt) {
            var output = document.getElementById("output");
            var input = document.getElementById("input");
            var uuid = document.getElementById("uuid");
            var ws;
            var print = function(message) {
                var d = document.createElement("div");
                d.innerHTML = message;
                output.appendChild(d);
            };
            document.getElementById("open").onclick = function(evt) {
                if ("WebSocket" in window) {
                    alert("您的浏览器支持 WebSocket! 地址：" + 'ws://' + window.location.host + '/ws_s/'+uuid.value);
                    // 打开一个 web socket
                    // var ws = new WebSocket("ws://localhost:8081/wss");
                    // ws = new WebSocket('ws://' + window.location.host + '/wss');

                    ws = new WebSocket('ws://' + window.location.host + '/ws_s/'+uuid.value);

                    if (ws) {
                        return false;
                    }
                    {{/*ws = new WebSocket("{{.}}");*/}}
                    ws.onopen = function()
                    {
                        // Web Socket 已连接上，使用 send() 方法发送数据
                        var obj = {
                            key: uuid.value,
                            method: "list",
                            message: "mmmmm显示" + input.value // Strip out html
                        };
                        console.log(obj);
                        obj = JSON.stringify(obj);
                        ws.send(obj);
                    };
                    ws.onmessage = function (evt)
                    {
                        var received_msg = evt.data;
                        alert("数据已接收1..."+received_msg);
                        debugger
                        var msg = JSON.parse(evt.data);
                        alert("数据已接收2..."+msg.message);
                        print("onmessage: " + evt.data);
                    };
                    ws.onclose = function (evt) {
                        print("CLOSE");
                        ws = null;
                    }
                    ws.onerror = function (evt) {
                        print("ERROR: " + evt.data);
                    }
                    return false;
                }
            };
            document.getElementById("send").onclick = function(evt) {
                if (!ws) {
                    return false;
                }
                print("SEND: " + input.value+"===="+uuid.value);
                // ws.send(input.value);

                ws.send(
                    JSON.stringify({
                        key: uuid.value,
                        method: "list",
                        message: "mmmmm显示" + input.value // Strip out html
                    })
                );
                ws.onmessage = function (evt)
                {
                    var received_msg = evt.data;
                    alert("数据已接收1..."+received_msg);
                    debugger
                    var msg = JSON.parse(evt.data);
                    alert("数据已接收2..."+msg.message);
                    print("onmessage: " + evt.data);
                };

                return false;
            };
            document.getElementById("close").onclick = function(evt) {
                if (!ws) {
                    return false;
                }
                ws.close();
                return false;
            };
        });
    </script>
</head>
<body>
<table>
    <tr><td valign="top" width="50%">
            <p>Click "Open" to create a connection to the server,
                "Send" to send a message to the server and "Close" to close the connection.
                You can change the message and send multiple times.
            </p>
                <form>
                    <button id="open">Open</button>
                    <button id="close">Close</button>
                    <p><input id="uuid" type="text" value="0078">
                    <p><input id="input" type="text" value="Hello world!">
                <button id="send">Send</button></p>
                </form>
        </td><td valign="top" width="50%">
            <div id="output"></div>
        </td></tr></table>
</body>
</html>

{{/*
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>

    <script type="text/javascript">
        function WebSocketTest()
        {
            if ("WebSocket" in window)
            {
                alert("您的浏览器支持 WebSocket! 地址："+'ws://' + window.location.host + '/wss');

                // 打开一个 web socket
                // var ws = new WebSocket("ws://localhost:8081/wss");
                var ws = new WebSocket('ws://' + window.location.host + '/wss');

                ws.onerror = function (event) {
                    alert("异常...");
                };

                ws.onopen = function()
                {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    ws.send("发送数据");
                    alert("数据发送中...");
                };

                ws.onmessage = function (evt)
                {
                    var received_msg = evt.data;
                    alert("数据已接收..."+received_msg);
                };

                ws.onclose = function()
                {
                    // 关闭 websocket
                    alert("连接已关闭...");
                };
            }

            else
            {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }
    </script>

</head>
<body>

<div id="sse">
    <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>

</body>
</html>*/}}
